<template>
  <div id="shop-home-page" class="shop-page"
       :style="{
    height:(getWinSize().height-60-this.getSafeArea().top)+'px'
  }"
  >
    <!--店铺头部-->
    <shop-header v-if="shop.id>0" :style="{top:(this.getSafeArea().top)+'px'}" :shop="shop"/>
    <!--经营分类-->
    <div id="shop-product-classify-box" style="position: relative;"
         :style="{top:(this.getSafeArea().top+150)+'px'}"
    >
      <div class="content">
        <div class="title">
          经营类目
        </div>
        <div class="list-item">
          <div class="item" v-for="(name,index) in shop.classifyName" :key="index" v-text="name"></div>
          <div class="c"></div>
        </div>
      </div>
    </div>
    <!--店铺banner-->
    <div id="shop-banner" style="position: relative;"
         :style="{
      top:(140+this.getSafeArea().top)+'px',
    }" class="swiper-banner" v-if="shop.bannerArr.length>0">
      <div class="swiper-wrapper" v-if="shop.bannerArr.length>0">
        <div class="swiper-slide" v-for="(item,key) in shop.bannerArr" :key="key">
          <img class="home-banner-image" :src="item"
               @click="$router.push({name:'ProductDetail',query:{id:item.productId}})">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!--  推荐商品  -->
    <div id="recommend-product-box" style="position: relative;" :style="{
      top:(140+this.getSafeArea().top)+'px',
    }">
      <el-divider><i class="el-icon-star-on"></i> 推荐商品</el-divider>
      <div id="recommend-product-list" v-if="productList.length>0" style="overflow-x: hidden; overflow-y: auto;" :style="{
        height:(this.getWinSize().height-(shop.bannerArr.length===0?350:510)-this.getSafeArea().top)+'px'
      }">
        <product-list-item v-for="(product,key) in productList" :key="key" :curr-product="product" :show-type="0"/>
        <div class="c"></div>
      </div>
    </div>

    <shop-bottom-nav/>
  </div>
</template>

<script>
import ShopHeader from '../common/ShopHeader'
import ProductListItem from '../common/ProductListItem'
import ShopBottomNav from '../common/ShopBottomNav'

export default {
  name: 'ShopHome',
  components: {ShopBottomNav, ProductListItem, ShopHeader},
  data: function () {
    return {
      shop: {
        "id": 0,
        "number": "115321",
        "name": "国美电器",
        "logo": "http://image.yangfankj.com/shop/logo/11.jpg",
        "classifyName": [
          "电子产品"
        ],
        "bannerArr": [],
        "province": "陕西省",
        "city": "西安市",
        "cityCode": "029",
        "county": "雁塔区",
        "address": "太白北路97号",
        "location": [
          "108.929723",
          "34.244161"
        ],
        "mobile": "15563663314",
        "productNums": 6,
        "collectNums": 2,
        "score": 80,
        "expressScore": 80,
        "businessStatus": {
          "name": "营业中",
          "id": 1
        },
        "businessTime": [
          "08:30",
          "20:00"
        ],
        "businessStopInfo": "",
        "distance": null,
        "expressPrice": 20,
        "freeExpressPrice": 100,
        "fullMinusPrice": [
          {
            "minus": 5,
            "full": 100
          },
          {
            "minus": 25,
            "full": 200
          },
          {
            "minus": 50,
            "full": 300
          },
          {
            "minus": 70,
            "full": 500
          }
        ],
        "isSameCitySend": 0
      },
      productList: []
    }
  },
  mounted () {
    this.getDetail()
    this.getProductList()
  },
  methods: {
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/getDetail', {
        id: $this.$route.query.id
      }, function (data) {
        $this.isLoading = false
        $this.shop = data
        $this.$forceUpdate()
        if (data.bannerArr.length>0){
          setTimeout(function () {
            $this.setBanner()
          }, 500)
        }
      }, function (data) {
        $this.isLoading = false
        $this.successTip(data.message, 'error')
      })
    },
    setBanner: function () {
      var swiper = new Swiper('.swiper-banner', {
        // 底部分页导航
        pagination: {
          el: '.swiper-pagination',
        },
        // 自动播放
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 切换效果:    默认=>滑动    fade=>渐入   cube=>盒子旋转  coverflow=>平面切换 flip=>平面翻转
        // effect : 'fade',
      })
    },
    // 商品列表
    getProductList:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'ShopProduct/getList', {
        shopId: $this.$route.query.id,
        sortOrder:'DESC',
        sortProp:'saleNums',
        pageSize:10,
      }, function (data) {
        $this.isLoading = false
        var productList=[]
        data.list.forEach(function (product, index) {
          productList.push(product)
        })
        $this.productList = productList
        $this.$forceUpdate()
      }, function (data) {
        $this.isLoading = false
        $this.successTip(data.message, 'error')
      })
    }
  }
}
</script>

<style scoped>

</style>
